<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:s="http://jboss.com/products/seam/taglib"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:a="http://richfaces.org/a4j" 
      template="/layout/template.xhtml">
		
		<ui:define name="head">
			<link href="stylesheet/milestones.css" rel="stylesheet" type="text/css"/>
			<script type="text/javascript" language="javascript">
				function openDialog() {
					$(".form").dialog();
				}
			</script>
		</ui:define>
		
		<ui:define name="title">Milestones</ui:define>
		
		<ui:define name="content">
			<script>
				$(function() {
					$( ".deadline_picker" ).datepicker();
				});

				$(document).ready(function() {
					$(".form").hide();
					if (window.location.href.search("milestoneId") != -1) {
						openDialog();
					}
				});
			</script>
			<a href="#" onclick="openDialog()">New milestone</a>
			<hr />
			<div class="results">

	            <h:outputText value="It looks that there is no milestones. You should probably add a few..."
	                       rendered="#{empty milestoneController.milestoneList()}"/>
	
				<a:repeat value="#{milestoneController.milestoneList()}" rendered="#{not empty milestoneController.milestoneList()}" var="milestone">
					<div class="milestoneStyle">
						<div class="titleLink">
							<s:link id="milestone_1" value="#{milestone.name}" propagation="none" view="/milestones.xhtml">
		                        <f:param name="milestoneId" value="#{milestone.id}"/>
		                    </s:link>
	                    </div><br/>
	                    <h:outputText value="#{milestone.description}" /><br/>
						<h:outputText value="Deadline: "/><h:outputText value="#{milestone.deadline}"  /><br/>
						<h:outputText value="The milestone is out of time!!" rendered="#{milestone.isLate()}"/><br/>
						<h:outputText value="The milestone is completed." rendered="#{milestone.finished}"/>
					</div>
					<hr/>
				</a:repeat>
	        </div>
		
			<div class="form">
				<h:form id="milestoneForm">	
		        	<h4>Add, modify or delete a milestone:</h4>
		        	<h:outputText value="Name: "/><br/>
		        	<h:inputText value="#{milestoneHome.instance.name}" /><br/>
		        	<h:outputText value="Deadline: "/><br/>
		        	<h:inputText type="text" value="#{milestoneHome.instance.deadline}" styleClass="deadline_picker"/><br />
		        	<h:outputText value="Description: "/><br/>
		        	<h:inputTextarea cols="30" rows="5" value="#{milestoneHome.instance.description}" /><br/>
		        	<h:outputText value="Finished? " rendered="#{milestoneHome.managed}"/>
		        	<h:selectBooleanCheckbox value="#{milestoneHome.instance.finished}" rendered="#{milestoneHome.managed}"/><br/>
		        	<h:outputText value="Project:" /><br/>
		        	<h:selectOneMenu value="#{milestoneHome.instance.project}" disabled="false">
		        		<s:selectItems var="proj" value="#{userHome.instance.getProjectAsList()}" label="#{proj.name}" itemValue="#{proj}" />
		        		<s:convertEntity />
		        	</h:selectOneMenu><br/>
		        	<div class="commandButtons">
			            <h:commandButton id="save"
		                          	  value="Save"
		                         	 action="#{milestoneController.persist()}"
		                       	   rendered="#{!milestoneHome.managed}"/>
			            <h:commandButton id="update"
			                          value="Save"
			                         action="#{milestoneController.update()}"
			                       rendered="#{milestoneHome.managed}"/>
			            <h:commandButton id="delete"
			                          value="Delete"
			                         action="#{milestoneController.remove()}"
			                      immediate="true"
			                       rendered="#{milestoneHome.managed}"/>
			            <s:button propagation="end"
			                               id="cancel"
			                            value="Cancel"
			                             view="/milestones.xhtml"/>
		            </div>
		    	</h:form>
	    	</div>
	    	
		</ui:define>

</ui:composition>